<template>
  <div class="app-layout">
    <component :is="layoutComponent"></component>
  </div>
</template>

<script setup lang="ts">
import { defaultSettings } from '../settings'
import LeftLayout from './layout/LeftLayout.vue'
import MixLayout from './layout/MixLayout.vue'
import TopLayout from './layout/TopLayout.vue'
import SpreadLayout from './layout/SpreadLayout.vue'
import { LayoutMode } from '@renderer/types/enums'
const layoutComponent = computed(() => {
  switch (defaultSettings.layout) {
    case LayoutMode.LEFT:
      return LeftLayout
    case LayoutMode.MIX:
      return MixLayout
    case LayoutMode.TOP:
      return TopLayout
    case LayoutMode.SPREAD:
      return SpreadLayout
    default:
      return LeftLayout
  }
})
</script>
<style lang="scss" scoped>
.app-layout {
  width: 100%;
  height: 100%;
}
</style>
